<template>
  <div class="my-card">
    <!-- 
      v-model="value"
      :model-value="value"
      @update:model-value="value = $event"
     -->
    <van-checkbox
      v-if="showCheckbox"
      :model-value="checked"
      @update:model-value="handleChange"
    />
    <van-card v-bind="$attrs">
      <template #num>
        <van-stepper
          theme="round"
          button-size="22"
          disable-input
          :model-value="num"
          @update:model-value="handleChangeNum"
        />
      </template>
    </van-card>
  </div>
</template>

<!-- <script>
export default {
  setup(props, { emit }) {
    //
    emit("xx事件");
  },
};
</script> -->

<script lang="ts" setup>
defineProps<{
  // 是否显示 checkbox 元素
  showCheckbox?: boolean;
  // checkbox 元素是否勾选
  checked?: boolean;
  // 商品数量
  num: number;
}>();

// 返回值是一个 emit 函数
const emit = defineEmits(["change", "update:num"]);

// 勾选框处理函数
const handleChange = (isChecked: boolean) => {
  console.log("handleChange", isChecked);
  // 触发一个自定义事件，通过父组件
  //      选项式中，通过 this.$emit
  //      setup选项中，通过 setup 函数接受到的第二个参数中的 emit
  //      setup语法糖，通过 defineEmits
  emit("change", isChecked);
};

const handleChangeNum = (num: number) => {
  console.log("handleChangeNum", num);
  // 触发一个自定义事件，通知父组件
  emit("update:num", num);
};

// 定义props通过一个 defineProps 的函数
//  defineProps defineEmit defineExpose 它们三个是编译器去处理（不需要引入）

// 数组语法
// defineProps(["price"]);
// 对象语法
// defineProps({
//   price: {
//     type: String,
//     default: "100",
//   },
// });
// TypeScript语法 props 是一个对象
// type Props = {
//   price?: string;
// };
// interface IProps {
//   price?: string;
//   title: string;
// }
// const props = defineProps<IProps>();
// console.log(props);
</script>

<style lang="scss" scoped>
.my-card {
  display: flex;
  .van-card {
    flex: 1;
    margin-top: 0;
  }
  .van-checkbox {
    padding: 0 16px;
  }
}
</style>
